<%--                                                                       --%>
<%-- Copyright (c) 2005 BroadVision, Inc.  All rights reserved.            --%>
<%--                                                                       --%>
<%-- This software is copyrighted. Under the copyright laws, this software --%>
<%-- may not be copied, in whole or in part, without prior written consent --%>
<%-- of BroadVision, Inc. or its assignees. This software is provided      --%>
<%-- under the terms of a license between BroadVision and the recipient,   --%>
<%-- and its use is subject to the terms of that license.                  --%>
<%--                                                                       --%>
<%-- This software may be protected by one or more U.S. and International  --%>
<%-- patents.  Certain applications of BroadVision One-To-One software are --%>
<%-- covered by U.S. patent 5,710,887.                                     --%>
<%--                                                                       --%>
<%-- TRADEMARKS: BroadVision and BroadVision One-To-One are registered     --%>
<%-- trademarks of BroadVision, Inc., in the United States and the         --%>
<%-- European Community, and are trademarks of BroadVision, Inc., in other --%>
<%-- countries.  The BroadVision logo, is a trademark of BroadVision,      --%>
<%-- Inc., in the United States and other countries. Additionally, IONA    --%>
<%-- and Orbix are trademarks of IONA Technologies, Ltd.  RSA, MD5, and    --%>
<%-- RC2 are trademarks of RSA Data Security, Inc.                         --%>
<%--                                                                       --%>

<c:set var="rightImg">
<img src="<%= request.getContextPath() %>/mc/images/action/icon_arrowright.gif" width="15" height="15" border="0" alt="<bean-el:message key="image.alt.moveRight" bundle="ep.messages"/>" title="<bean-el:message key="image.alt.moveRight" bundle="ep.messages"/>"/>
</c:set>
<c:set var="leftImg">
<img src="<%= request.getContextPath() %>/mc/images/action/icon_arrowleft.gif" width="15" height="15" border="0" alt="<bean-el:message key="image.alt.moveLeft" bundle="ep.messages"/>" title="<bean-el:message key="image.alt.moveLeft" bundle="ep.messages"/>"/>
</c:set>

<script language="JavaScript">

//
//
//
function moveRight(qid) {
  var src = "QualifierSetAttributes" + qid;
  var dest = "QualifierUnsetAttributes" + qid;

  var srcElement = document.epform[src];
  var destElement = document.epform[dest];

  moveOptions(srcElement, destElement);
}

//
//
//
function moveLeft(qid) {
  var src = "QualifierUnsetAttributes" + qid;
  var dest = "QualifierSetAttributes" + qid;

  var srcElement = document.epform[src];
  var destElement = document.epform[dest];

  moveOptions(srcElement, destElement);
}

//
//
//
function moveOptions(srcElement, destElement) {
  var len = srcElement.length;

  for (var index = 0; index < len; index++) {
    if (srcElement.options[index].selected) {
      var last = destElement.length;
      destElement.options[last] = new Option(" ");
      destElement.options[last].text = srcElement.options[index].text;
      destElement.options[last].value = srcElement.options[index].value;
    }
  }

  for (var index = len - 1; index >= 0; index--) {
    if (srcElement.options[index].selected) {
      srcElement.options[index] = null;
    }
  }
}

//
//
//  
function clearAllSelected(form) {
  var len = form.elements.length;
  var field = "QualifierSetAttributes";

  for (var index = 0; index < len; index++) {
    if (form.elements[index].type == "select-multiple") {
      var pos = form.elements[index].name.indexOf(field);
      if (pos == 0) {
        var id = form.elements[index].name.substring(field.length);
        var destName = "QualifierUnsetAttributes" + id;

        var srcElement = form.elements[index];
        var destElement = form[destName];

        appendAll(srcElement, destElement);
      }
    }
  }
  clearAllSelectedOptions(form);
}

//
//
//  
function selectAllAvailable(form) {
  var len = form.elements.length;
  var field = "QualifierSetAttributes";

  for (var index = 0; index < len; index++) {
    if (form.elements[index].type == "select-multiple") {
      var pos = form.elements[index].name.indexOf(field);
      if (pos == 0) {
        var id = form.elements[index].name.substring(field.length);
        var destName = "QualifierUnsetAttributes" + id;

        var srcElement = form[destName];
        var destElement = form.elements[index];

        appendAll(srcElement, destElement);
      }
    }
  }
  clearAllAvailableOptions(form);
}

//
//
//
function appendAll(srcElement, destElement) {
  var len = srcElement.length;

  for (var index = 0; index < len; index++) {
    var last = destElement.length;
    destElement.options[last] = new Option(" ");
    destElement.options[last].text = srcElement.options[index].text;
    destElement.options[last].value = srcElement.options[index].value;			
  }
}

//
//
//
function clearAllAvailableOptions(form) {
  clearAllOptionsForField(form, "QualifierUnsetAttributes");
}

//
//
//
function clearAllSelectedOptions(form) {
  clearAllOptionsForField(form, "QualifierSetAttributes");
}

//
//
//
function clearAllOptionsForField(form, field) {
  var len = form.elements.length;
  for (var index = 0; index < len; index++) {	
    if (form.elements[index].type == "select-multiple") {
      var pos = form.elements[index].name.indexOf(field);
      if (pos == 0) {
        form.elements[index].length = 0;
      }
    }
  }
}

function selectAllLeft() {
  var formslen = document.forms.length;
  var lastelement = "";
  for (f=0;f<formslen;f++) {
    var elemslen = document.forms[f].elements.length;
    for (e=0;e<elemslen;e++) {
      if (document.forms[f].elements[e].type == "select-multiple") {
        var pos = document.forms[f].elements[e].name.indexOf("QualifierSetAttributes");
        if ( pos == 0) {
          var size = document.forms[f].elements[e].length;
          for (i=0; i < size ; i++) {
            document.forms[f].elements[e].options[i].selected=true;
          }
        }
      }
    }
  }
  return true;
}

</script>

<table class="zoneFive" width="100%" border="0" cellspacing="0" cellpadding="0" summary="content area">
  <tr>
    <td valign="top" width="100%">

      <div class="pageTitle">
         <c:out value="${pageTitle}"/>
      </div> 

      <div class="errorMessage"><html-el:errors bundle="ep.messages"/></div>
      <%@include file="/mc/common/pagetab.jsp" %>

      <div class="pageSubtitle">
        <span class="left">
          <bean-el:message key="ep.qualifier.value.object.qualifiers" bundle="ep.messages"/>
        </span>
      </div>

      <div class="globalButtonWrap">
        <input type="button" name="removeAllValues" class="globalButton" 
               onClick="clearAllSelected(this.form);" value='<bean-el:message key="button.qualifier.values.remove.all" bundle="ep.messages"/>'>
          
        <input type="button" name="addAllValues" class="globalButton" 
            onClick="selectAllAvailable(this.form);" value='<bean-el:message key="button.qualifier.values.add.all" bundle="ep.messages"/>'>
      </div>


      <!--start main content area here-->
      <table class="dataTable" border="0" cellspacing="1" cellpadding="2" summary="Category" width="100%">
        <tr class="listHeader"> 
          <th id="Name" align="left" width="15%">
            <bean-el:message key="ep.qualifier.value.object.qualifier" bundle="ep.messages"/>
          </th>
          <th id="Values" align="left" width="85%">
	    <table border="0" cellspacing="0" cellpadding="0" width=100%>
	      <tr class="listHeader">
	        <th id="CurrentValues">
                  <bean-el:message key="ep.qualifier.value.object.current.values" bundle="ep.messages"/>
                </th>
	        <th id="AvailableValues">
                  <bean-el:message key="ep.qualifier.value.object.available.values" bundle="ep.messages"/>
                </th>
	      </tr>
	    </table>
          </th>
        </tr>

        <c:choose>
          <c:when test="${not empty qualifiers}">
            <c:forEach var="qualifier" items="${qualifiers}" varStatus="status">

              <c:choose>
                <c:when test="${(status.count + 1) % 2 == 0}">
	<tr class="listEven">
                </c:when> 
  	        <c:otherwise>
	<tr class="listOdd">
	        </c:otherwise>
              </c:choose>

          <td headers="Name">
            <c:out value="${qualifier.map.name}"/>
          </td>

<input type="hidden" name="qualifierId" value="<c:out value="${qualifier.map.id}"/>"/>

          <td headers="Values">
            <table width="100%">
              <tr>
	         <td width="45%" align="center">
	            <select name="QualifierSetAttributes<c:out value="${qualifier.map.id}"/>" onChange="" size="4" multiple>
                      <c:forEach var="value" items="${qualifier.map.selectedValues}" varStatus="status">
                         <option value="<c:out value="${value.map.id}"/>"><c:out value="${value.map.name}"/></option>
                      </c:forEach>
                    </select>
	         </td>
	         <td width="10%">
                     <a onclick="moveRight('<c:out value="${qualifier.map.id}"/>');"><c:out
                     value='${rightImg}' escapeXml="false"/></a>
		       <br>
                     <a onclick="moveLeft('<c:out value="${qualifier.map.id}"/>');"><c:out
                     value='${leftImg}' escapeXml="false"/></a>
	         </td>
                 <td width="45%" align="center">
	            <select name="QualifierUnsetAttributes<c:out value="${qualifier.map.id}"/>" onChange="" size=4 multiple>
                      <c:forEach var="value" items="${qualifier.map.availableValues}" varStatus="status">
                         <option value="<c:out value="${value.map.id}"/>"><c:out value="${value.map.name}"/> </option>
                      </c:forEach>
                    </select>
	         </td>
	      </tr>
	    </table>
    	  </td>
        </tr>      
        
            </c:forEach>
          </c:when>
          <c:otherwise>
              <tr class="listOdd">
                <td colspan=7 align="center">
                  <bean-el:message key="ep.qualifier.value.object.qualifiers.not.found" bundle="ep.messages"/>
                </td>
              </tr>
          </c:otherwise>
        </c:choose>
      </table>
      <!--end main content area here-->
      <div class="pageButtonWrap" align="right">
          <html-el:button styleClass="inputButton" property="cancelBtn" onclick="return doCancel(this.form);">
            <bean-el:message key="button.cancel" bundle="ep.messages"/>
          </html-el:button>
          &nbsp;
          <html-el:submit styleClass="inputButton" property="submitBtn" onclick="return doQualifierSave(this.form);">
            <bean-el:message key="button.save" bundle="ep.messages"/>
          </html-el:submit>
      </div>

    </td>
  </tr>
</table>
